// 用户页面的路由
import users from '@/views/users.ejs';
import axios from '@/api/index.js';

// 创建一个函数 获取添加的用户数据 
async function getUsers(res, p, perpage) {

    let { data: { result, pageCount } } = await axios.get("/admin/getUsers", {
        params: {
            p,
            perpage
        }
    });

    console.log("pagecount:", pageCount);
    //   console.log(data);
    console.log("--", axios.defaults.baseURL); // 获取公共配置里的 baseURL ；
    let baseURL = axios.defaults.baseURL
    res.render(users({ users: result, baseURL, pageCount }));  // 把获取的用户推送到 模板
}

function addEvent(res) {

    // 获取添加用户的按钮 ，绑定添加事件 
    let adduerEle = document.querySelector(".adduer");
    let maskEle = document.querySelector(".mask");
    let addUserModelEle = document.querySelector(".adduermodel")
    adduerEle.onclick = function () {
        // 让遮罩层 和添加界面显示出来
        maskEle.style.display = "block";
        addUserModelEle.style.display = "block";
    }

    // 点击 关闭按钮的时候 关闭添加的对话框 
    let closebtnEle = document.querySelector(".closebtn");
    closebtnEle.onclick = function () {
        maskEle.style.display = "none";
        addUserModelEle.style.display = "none";
    }

    // 点击 提交按钮的时候 获取 用户相关信息 提交到后端；
    let btnEle = document.querySelector(".btn");
    let usernameEle = document.querySelector(".username");
    let pwd1Ele = document.querySelector(".pwd")
    let pwd2Ele = document.querySelector(".repeatpwd");
    let imgFileEle = document.querySelector(".imgFile");

    btnEle.onclick = async function () {
        let pwd1 = pwd1Ele.value;
        let pwd2 = pwd2Ele.value;
        if (pwd1 === pwd2) {
            // 获取数据提交后端；
            let username = usernameEle.value;
            let pwd = pwd1;
            console.log(username, pwd);
            // 获取图片 通过ajax 传递给后端；
            // 获取图片对象
            let imgFile = imgFileEle.files[0];

            let form = new FormData();
            form.append("username", username);
            form.append("pwd", pwd);
            form.append("imgFile", imgFile)

            // 通过ajax 把form对象传递给 后端；
            let { data } = await axios.post("/adduser", form);
            if (data.status === 1) {
                alert("添加成功");
                maskEle.style.display = "none";
                addUserModelEle.style.display = "none";
                // 重新获取数据 在渲染 ，不会刷新页面
                await getUsers(res);  // 重新获取数据
                addEvent(res);  // 重新绑定事件；
            } else {
                alert("添加失败");
            }

        } else {
            alert("2次密码输入的不同");
        }
    }

    // 当文件上传按钮改变的时候生成图片预览

    imgFileEle.onchange = function () {
        console.log("改变了");
        // 获取文件对象 
        let imgFile = this.files[0];
        let fileRader = new FileReader();
        fileRader.readAsDataURL(imgFile);  // 把文件对象转成dataUrl格式
        fileRader.onload = function () {
            // 获取 读取到的base64格式
            let str = fileRader.result;
            console.log(str);
            let imgshowEle = document.querySelector(".imgshow");
            imgshowEle.innerHTML = "";
            let img = new Image();
            img.style.width = "100px";
            img.style.height = "100px";
            img.src = str;
            imgshowEle.appendChild(img);
        }
    }

    // 获取分页按钮 ，绑定点击事件
    let aEles = document.querySelectorAll(".page a");
    aEles.forEach(item => {
        item.onclick = async function (e) {
            e.preventDefault(); // 阻止默认事件；
            // e.stopPropagation() // 阻止事件传播
            // 获取当前的页码
            let p = this.getAttribute("p");
            console.log("点击了分页", p);
            // 点击分页的时候 存储页码 ；
            localStorage.setItem("p",p);
            await getUsers(res, p);
            addEvent(res);
        }
    })

    // 获取删除按钮  
    let delBtns = document.querySelectorAll(".delBtn");
    delBtns.forEach(btn => {
        btn.onclick = async function () {
            // 假删 ，利用更新取代删除
            // isdelete 1 没删除  0 已经删除 
            // 获取数据的时候 给一个 isdelete 条件 
            let sure = confirm("你确定要删除吗？")
            if (sure) {
                console.log("点击了删除按钮");
                // 获取id ，传给后端删除内容 ；
                let _id = this.getAttribute("myid");
                console.log(_id);
                let { data } = await axios.delete("/admin/delUser", {
                    params: {
                        _id
                    }
                })
                console.log(data);
                if (data.status === 1) {
                    console.log("删除成功");
                    // 查看 localstroage里是否存在 页码 ，如果存在那么传递页码到后端查询数据
                    let p;
                    if(localStorage.getItem("p")){
                        p = localStorage.getItem("p");
                    }
                    await getUsers(res,p);
                    addEvent(res);
                } else {
                    console.log("删除失败");
                }


            }

        }
    })
   
    document.querySelector(".loginout").onclick = function(){
        localStorage.removeItem("token")
        window.location.href = "/login";
    }
}


export default function (router) {
    router.route("/admin/users", async (req, res) => {
        await getUsers(res);
        // res.render(users());
        addEvent(res);
    })

}